<template>
  <view>
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <checkbox-group @change="checkChange">
        <view v-for="(item, index) in dataList" :key="index" class="box-item">
          <view class="title-lay">
            <checkbox v-if="edit" :value="item.id" style="transform:scale(0.7);margin-right: 20rpx"/>
            <view class="address">{{ item.area }}</view>
            <view class="time">{{ $wanlshop.timeFormat(item.createtime,'yyyy-mm-dd hh:MM:ss') }}</view>
          </view>
          <view class="content">
            <view>{{ item.title }}</view>
            <view>代理人: {{ item.name }}</view>
            <view>联系方式: {{ item.phone}}</view>
            <view>微信号: {{ item.wechat}}</view>
            <view>公司: {{ item.company}}</view>
            <view>留言内容: {{ item.leave_word }}</view>
          </view>
        </view>
      </checkbox-group>
      <template #bottom>
        <view v-if="edit" class="btn-submit" @tap="deleteItem">删除</view>
      </template>
    </z-paging>
    <view class="btn-edit" @click="edit = !edit">{{ edit? "完成":"管理" }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      edit: false,
      dataList:[],
      checkArray:[],
    };
  },
  methods: {
    checkChange(e){
      this.checkArray = e.detail.value
      console.log(this.checkArray)
    },
    queryList(pageNo, pageSize){
      this.$api.get({
        url: '/wanlshop/shop/leaveWordReceive',
        data: {
          current_page: pageNo
        },
        success: res => {
          this.$refs.paging.complete(res.data);
        },
        fail: () => {
          this.$refs.paging.complete(false);
        }
      });
    },
    deleteItem(){
      const _that = this
      if (this.checkArray.length === 0){
        this.$wanlshop.msg('请选择要删除的数据')
      }else{
        this.$api.post({
          url: '/wanlshop/shop/leaveWordDelete',
          data: {
            type: 1,
            ids: this.checkArray.join(',')
          },
          success: res => {
            _that.$wanlshop.msg('删除成功')
            _that.checkArray = []
            _that.edit = false
            _that.$refs.paging.reload();
          }
        })
      }
    }
  },
}
</script>

<style lang="scss">
.btn-edit{
  height: 100rpx;
  line-height: 100rpx;
  width: 100rpx;
  border-radius: 50rpx;
  background: #ff9000;
  text-align: center;
  color: white;
  position: fixed;
  bottom: 140rpx;
  right: 40rpx;
}
.btn-submit{
  width: 700rpx;
  margin: 30rpx 25rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: #ff9000;
  border-radius: 15rpx;
  color: white;
  text-align: center;
}
.box-item{
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 22rpx;
  border-radius: 15rpx;
}
.box-item .title-lay{
  height: 80rpx;
  display: flex;
  padding: 0 20rpx;
  align-items: center;
  border-bottom: 1rpx solid #eee;
}
.box-item .title-lay .address{
  color: black;
  font-size: 30rpx;
  flex: 1;
}
.box-item .title-lay .time{
  color: black;
  font-size: 30rpx;
}
.link{
  color: #ff9000;
  margin-left: 10rpx;
}
.box-item .content{
  color: #666;
  font-size: 30rpx;
  line-height: 2;
  padding: 20rpx;
}
</style>
